<template>
  <div class="add-product">
    <h1>新增保险产品</h1>
    <div>
      <div class="product-box">
        <label for style="margin-right: 15px">请输入产品名称:</label>
        <el-input v-model="product.name"></el-input>
      </div>
      <div class="product-box">
        <label for style="margin-right: 15px">请输入产品价格:</label>
        <el-input v-model="product.price" type="number"></el-input>
      </div>
      <div class="product-box">
        <label for style="margin-right: 15px">请输入产品的内容描述:</label>
        <el-input type="textarea" :rows="4" v-model="product.information"></el-input>
      </div>
      <div class="product-box">
        <label for style="margin-right: 15px">请选择产品年限:</label>
        <template>
          <el-radio v-model="product.year" label="1">1年</el-radio>
          <el-radio v-model="product.year" label="2">2年</el-radio>
          <el-radio v-model="product.year" label="3">3年</el-radio>
        </template>
      </div>
      <div class="product-box">
        <label for style="margin-right: 15px">请选择保险类型:</label>
        <el-dropdown @command="handleCommand">
          <el-button type="primary">
            {{ type }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="item" v-for="(item,index) in classifyData" :key="index">
              {{
              item.name
              }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="product-box">
        <h5 style="margin-bottom: 10px">上传产品图片</h5>
        <el-upload
          class="avatar-uploader"
          action="http://localhost:3000/images/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="'http://localhost:3000/temp/' + imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="product-box">
        <el-button type="primary" @click="addOnePro">确认新增</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import api from "../../../network/apis/api";
import axios from "../../../network/axios";
const { mapState, mapActions } = createNamespacedHelpers("products");
export default {
  data() {
    return {
      imageUrl: "",
      product: {
        name: "",
        price: 0,
        information: "",
        year: "1",
        classifyId: "",
        imgURL: ""
      },
      type: "保险类别",
      classifyData: []
    };
  },
  created() {
    this.obtainAllClassify();
  },
  methods: {
    //选择保险种类
    handleCommand(command) {
      this.product.classifyId = command._id;
      this.type = command.name;
    },

    //获得所有保险产品分类
    async obtainAllClassify() {
      const { data } = await axios({
        url: "/classify/lookAllClassify",
        method: "get"
      });
      if (data.status) {
        this.classifyData = data.data;
      }
    },

    //上传图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data;
      this.product.imgURL = res.data;
    },
    //限制图片上传的大小
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    //发送请求 新增产品
    async addOnePro() {
      const { data } = await api.products.addPro(this.product);
      if (data.status) {
        this.product = {};
        this.imageUrl = "";
        this.type = "保险种类";
      }
    }
  }
};
</script>

<style lang="scss">
.add-product {
  width: 600px;
  padding: 20px 50px;
  h1 {
    margin-bottom: 15px;
  }
  .product-box {
    padding-bottom: 15px;
    label,
    span {
      font-size: 14px;
    }
    .el-input {
      width: 400px;
    }
    .el-textarea__inner {
      margin-top: 10px;
    }
  }
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #aaa;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 140px;
  height: 110px;
  display: block;
  border: 1px dashed #aaa;
}
</style>
